<template>
  <view class="typeRecommend">
    <view class="title">同类推荐</view>
    <view class="service-content">
      <view class="itemWarper" v-for="item in list" :key="item.id">
        <image
          :key="item.id"
          @tap="goToDetails(item.id)"
          :src="getMainImageUrl(item)"
          class="image"
        />
        <view class="name">{{ item.name }}</view>
        <view class="description">{{ item.description }}</view>
        <view class="price-info">
          <text class="price">{{
            getDefaultPrice(item)
              ? `￥${moneyFormat(getDefaultPrice(item))}`
              : `${getDefaultPoint(item)}积分`
          }}</text>
          <!-- <text class="strikethrough">¥123</text> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import {
  getMainImageUrl,
  moneyFormat,
  getDefaultPriceAndPoint,
} from "../../../../../services/products-service";

export default {
  data() {
    return {};
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    goToDetails(productId) {
      Taro.navigateTo({
        url: `/pages/sales/details/index?productId=${productId}`,
      });
    },
    getMainImageUrl,
    moneyFormat,
    getDefaultPrice(product) {
      return getDefaultPriceAndPoint(product).money;
    },
    getDefaultPoint(product) {
      return getDefaultPriceAndPoint(product).points;
    },
  },
};
</script>
